<template>
	<div>
		<div class="ant-input tag-box" :class="{'backgroundColor': disabled}" tabindex="0" @click="openModal">
			<div class="prompt-box">
				<template v-if="orgList.length">
					<a-tag v-for="(item, index) in orgList" :key="item.value" closable @close="() => handleTagClose(item.value)">
						{{ item.text }}
					</a-tag>
				</template>
				<div v-else>{{placeholder}}</div>
			</div>
		</div>
		<depart-select-modal
			style="width: 100%;"
			ref="departSelect"
			:url="url"
			:title="title"
			:visible="visible"
			:multiple="multiple"
			:dataList="dataList"
			:rawTreeData="treeData"
			:treeText="labelName"
			:treeId="valueName"
			:searchPlaceholder="searchPlaceholder"
			@confirm="handleConfirm"
			@cancel="handleCancel"
		/>
	</div>
</template>

<script>
	import DepartSelectModal from "./modal/DepartSelectModal.vue";
	export default {
		components: {
			DepartSelectModal
		},
		model: {
			prop: 'value',
			event: 'change'
		},
		props: {
			value: "",
			multiple: {
				type: Boolean,
				default: false
			},
			url: {
				type: String,
				default: "/mdata/organization/getTreeSysOrganization"
			},
			getDetailUrl: {
				type: String,
				default: "/mdata/organization/getListOrganizationByOrgId"
			},
			placeholder: {
				type: String,
				default: "请选择组织"
			},
			disabled: {
				type: Boolean,
				default: false
			},
			labelName: {
				type: String,
				default: "orgName"
			},
			valueName: {
				type: String,
				default: "id"
			},
			detailId: {
				type: String,
				default: "orgId"
			},
			title: {
				type: String,
				default: "组织机构"
			},
			searchPlaceholder: {
				type: String,
				default: "请输入组织机构名称"
			}
		},
		watch: {
			value: {
				deep: true,
				immediate: true,
				handler: function(e){
					if(!e){
						this.orgList = [];
					}else{
						this.getOrgData();
					}
				}
			}
		},
		data(){
			return {
				visible: false,
				orgList: [],
				dataList: [],
				treeData: [],
				flag: false
			}
		},
		mounted() {
			// this.getTreeData()
		},
		methods: {
			getTreeData(){
				this.$post(this.url).then((res) => {
					this.dataList = [];
					if(res.statusCode === 200){
						this.treeData = res.data;
						this.flag = false;
						this.generateList(this.treeData);
						this.visible = true;
						this.$refs.departSelect.selectData = this.orgList;
					}
				});
			},
			getOrgData(){
				if(this.value){
					this.$post(this.getDetailUrl,{
						[this.detailId]: this.value.toString()
					}).then((res) => {
						if(res.statusCode === 200){
							this.orgList = [];
							res.data.forEach(item => {
								this.orgList.push({
									text: item[this.labelName],
									value: item[this.valueName]
								})
							})
							// this.$emit("change", this.orgList.map(e => e.value).toString(), this.orgList)
						}
					});
				}
				// if(this.value){
				// 	this.$post(this.url).then((res) => {
				// 		let data = [];
				// 		this.orgList = [];
				// 		data = this.value.toString().split(",");
				// 		for(let i=0;i<data?.length;i++){
				// 			for(let j=0;j<this.dataList.length;j++){
				// 				if(data[i]==this.dataList[j].key){
				// 					this.orgList.push({
				// 						text: this.dataList[j].title,
				// 						value: this.dataList[j].key
				// 					})
				// 				}
				// 			}
				// 		}
				// 		this.$emit("change", this.orgList.map(e => e.value).toString(), this.orgList)
				// 	});
				// }
			},
			generateList(data) {
			  for (let i = 0; i < data.length; i++) {
			    const node = data[i];
			    this.dataList.push({
						key: node[this.valueName],
						title: node[this.labelName],
						icon: 'apartment'
						// icon: node.iconCls
					});
					node.slots = { icon: node.id.toString() }
			    if (node.children) {
			      this.generateList(node.children);
			    }
			  }
			},
			openModal(e){
				if(!this.disabled && !this.flag){
					this.flag = true;
					this.getTreeData();
				}
			},
			handleConfirm(data){
				this.visible = false;
				this.orgList = data;
				this.$emit("change", data.map(e => e.value).toString(), data)
			},
			handleCancel(){
				this.orgList = [];
				this.visible = false;
			},
			handleTagClose(value) {
				const data = this.orgList.filter(item => item.value !== value);
				this.$emit("change", data.map(e => e.value).toString(), data)
				this.orgList = data;
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	.backgroundColor{
		background-color: #f5f5f5;
	}
	.tag-box{
		cursor: pointer;
		height: auto;
		padding: 0 4px 4px;
		.prompt-box{
			line-height: 22px;
			
			div{
				display: inline-block;
				margin-top: 4px;
				margin-left: 5px;
				color: #BFBFBF;
				overflow-wrap: anywhere;
			}
			.ant-tag{
				margin-top: 4px;
			}
		}
	}
</style>